<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box{width:400px;height:200px;border:solid 1px black;margin:10px auto;position: relative;background: #ccc;}
        .imgbox{width:2000px;position: absolute;}
        .imgbox .item{width:400px;height:200px;font-size: 80px;line-height:200px;text-align:center;float: left;}
        .item:nth-child(1){background: #399;}
        .item:nth-child(2){background: #393;}
        .item:nth-child(3){background: #993;}
        .item:nth-child(4){background: #939;}
        .item:nth-child(5){background: #339;}

        .btns input{position: absolute;width:40px;height:40px;top:80px;}
        #left{left:0;}
        #right{right:0;}
    </style>
</head>
<body>
    <div class="box">
        <div class="imgbox">
            <div class="item">0</div>
            <div class="item">1</div>
            <div class="item">2</div>
            <div class="item">3</div>
            <div class="item">4</div>
        </div>
        <div class="btns">
            <input type="button" value="<" id="left">
            <input type="button" value=">" id="right">
        </div>
    </div>
</body>
<script src="../move.js"></script>
<script>

    // 分析：轮播图，点击按钮切换内容
    // 1. 获取元素
    // 2. 设置默认索引
    // 2. 绑定事件
        // 3. 计算索引：右++，左--
        // 4. 根据索引计算要移动的imgbox的位置
    
    // 设计：
    // function Banner(){
    //     // 1. 获取元素
    //     // ...
    //     // 2. 设置默认索引
    //     // ...
    //     // 2. 绑定事件
    //     this.addEvent();
    // }
    // Banner.prototype.addEvent = function(){
    //     // 绑定左按钮的事件
    //         // 触发
    //     // 绑定右按钮的事件
    //         // 触发事件
    //         // 3. 计算索引：++
    //         this.changeIndex();
    // }
    // Banner.prototype.changeIndex = function(){
    //     // ...
    //     // 4. 根据索引计算要移动的imgbox的位置
    //     this.changePos();
    // }
    // Banner.prototype.changePos = function(){
    //     // ...
    // }
    // new Banner();


    // 编程
    function Banner(){
        // 1. 获取元素
        this.left = document.querySelector("#left")
        this.right = document.querySelector("#right")
        this.items = document.querySelectorAll(".item")
        this.imgbox = document.querySelector(".imgbox")
        // 2. 设置默认索引
        this.index = 0;

        // 2. 绑定事件
        this.addEvent();
    }
    Banner.prototype.addEvent = function(){
        const that = this;
        // 绑定左按钮的事件
        this.left.onclick = function(){}
        // 绑定右按钮的事件
        this.right.onclick = function(){
            // 3. 计算索引：
            that.changeIndex();
        }
    }
    Banner.prototype.changeIndex = function(){
        // 计算索引，注意终点判断
        if(this.index === this.items.length-1){
            this.index = 0;
        }else{
            this.index++
        }
        // 4. 根据索引计算要移动的imgbox的位置
        this.changePos();
    }
    Banner.prototype.changePos = function(){
        move(this.imgbox, {left: this.index * -400});
    }
    new Banner();
    


</script>
</html>